<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="appendLi">在Li后边追加元素</button>
		<button id="preLi">在Li前边追加元素</button>
		<ul>
			<li>这是第1个LI</li>
			<li>这是第2个LI</li>
			<li>这是第3个LI</li>
			
			<li class="lis">这是第4个LI</li>
			
			<li>这是第5个LI</li>
			<li>这是第6个LI</li>
			<li>这是第7个LI</li>
			<li>这是第8个LI</li>
			<li>这是第9个LI</li>
		</ul>
	</body>
	<script src="js/jquery.3.6.3.js"></script>
	<script>
		
		//内部插入
		
		//后置追加
		let $liEl = $("<li>这是最后一个LI</li>");
		
		$("#appendLi").click(function(){
			//把$liEl 添加到 $(ul) 元素的末尾
			$liEl.appendTo($("ul"));
			//给$(ul)添加末尾 $liEl元素
			$("ul").append($liEl);
		})
		
		//前置插入
		let $preLiEl = $("<li>这是第一个LI</li>");
		$("#preLi").click(function(){
			//把$preliEl 添加到 $(ul) 元素的开始
			$preLiEl.prependTo($('ul'));
			//给$(ul)添加开始 $liEl元素
			// $('ul').prepend($preLiEl);
		})
		
		//外部插入
		
		//之前
		// $(".lis").before($("<li>LI4前面的</li>"));
		$("<li>LI4前面的</li>").insertBefore($(".lis"));
		
		//之后
		// $(".lis").after($("<li>LI4后面的</li>"));
		
		$("<li>LI4后面的</li>").insertAfter($(".lis"));
		
	</script>
</html>